import { title } from "process";
import { Component } from "react";
import type { ReactNode } from 'react'

/*
    父传子：
    传类组件
        1. 在使用组件的时候通过属性的方式传递过去 <Header name='参数' />
        2. 在类组件中通过 props = { name: '默认值',... } 
        3. 使用，在组件中通过 {this.props.name} 使用

    传函数组件
        1. 在使用组件的时候通过属性的方式传递过去 <Content name='参数' />
        2. 接收，通过形参的方式接收参数 function Content(props: iProps){}
        3. 使用，直接 {props.name}
*/


interface iProps {
    title: string
    is: string | number | boolean
    a: number
}


class Header extends Component {
    // 2. 接收父组件传递过来的数据
    // 父子传参叫单向数据流
    props = {
        name: '默认值',
        msg: ''
    }
    render(): ReactNode {
        return <header>
            {/* 3. 使用 */}
            <h1>头部组件 --- {this.props.name} --- {this.props.msg}</h1>
        </header>
    }
}


function Content(props: iProps) {
    return <main>
        <h1>主体内容 --- {props.title} --- {props.is ? '1' : '2'}</h1>
    </main>
}


export default class App extends Component {
    /*
        状态变量的应用
        定义： state 是类组件中用来定义状态变量的关键字，所有的状态变量都要放在 state 里面
        修改： 必须要通过 this.setState 修改状态变量，否则没有效果
    */
    state = {
        title: '辣条'
    }

    render(): ReactNode {

        return <>
            <div>
                <h1>父组件 -- {this.state.title}</h1>
                <button onClick={() => {

                    // 不能直接修改，不具备响应式
                    // this.state.title = '西瓜'

                    // setState 是 React 中唯一修改状态变量的方法
                    this.setState({
                        title: '西瓜🍉'
                    })

                }}>点击修改title</button>
                <hr />
                {/* 1. 通过属性将参数传递到子组件 */}
                <Header name={'哈哈哈哈'} msg={this.state.title}></Header>
                <hr />
                {/* 父子传参的时候只要不是纯字符串都要加 {} */}
                <Content title={this.state.title} is={false} a={10} />
            </div>
        </>
    }
}